<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div>
      <div
        class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
        style="margin-block-end: 16px;"
      >
        <div
          class="ant-space-item"
        >
          Tab position：
        </div>
        <div
          class="ant-space-item"
        >
          <div
            class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
          >
            <div
              class="ant-select-selector"
            >
              <span
                class="ant-select-selection-wrap"
              >
                <span
                  class="ant-select-selection-search"
                >
                  <input
                    aria-autocomplete="list"
                    aria-controls="rc_select_TEST_OR_SSR_list"
                    aria-expanded="false"
                    aria-haspopup="listbox"
                    aria-owns="rc_select_TEST_OR_SSR_list"
                    autocomplete="off"
                    class="ant-select-selection-search-input"
                    id="rc_select_TEST_OR_SSR"
                    readonly=""
                    role="combobox"
                    style="opacity: 0;"
                    type="search"
                    unselectable="on"
                    value=""
                  />
                </span>
                <span
                  class="ant-select-selection-item"
                  title="top"
                >
                  top
                </span>
              </span>
            </div>
            <span
              aria-hidden="true"
              class="ant-select-arrow"
              style="user-select: none;"
              unselectable="on"
            >
              <span
                aria-label="down"
                class="anticon anticon-down ant-select-suffix"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  data-icon="down"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
                  />
                </svg>
              </span>
            </span>
          </div>
        </div>
      </div>
      <div
        class="ant-pro-card ant-pro-card-border"
      >
        <div
          class="ant-pro-card-tabs"
        >
          <div
            class="ant-tabs ant-tabs-top"
          >
            <div
              aria-orientation="horizontal"
              class="ant-tabs-nav"
              role="tablist"
            >
              <div
                class="ant-tabs-nav-wrap"
              >
                <div
                  class="ant-tabs-nav-list"
                  style="transform: translate(0px, 0px);"
                >
                  <div
                    class="ant-tabs-tab"
                    data-node-key="tab1"
                  >
                    <div
                      aria-controls="rc-tabs-test-panel-tab1"
                      aria-selected="false"
                      class="ant-tabs-tab-btn"
                      id="rc-tabs-test-tab-tab1"
                      role="tab"
                      tabindex="-1"
                    >
                      Product One
                    </div>
                  </div>
                  <div
                    class="ant-tabs-tab ant-tabs-tab-active"
                    data-node-key="tab2"
                  >
                    <div
                      aria-controls="rc-tabs-test-panel-tab2"
                      aria-selected="true"
                      class="ant-tabs-tab-btn"
                      id="rc-tabs-test-tab-tab2"
                      role="tab"
                      tabindex="0"
                    >
                      Product Two
                    </div>
                  </div>
                  <div
                    class="ant-tabs-tab"
                    data-node-key="tab3"
                  >
                    <div
                      aria-controls="rc-tabs-test-panel-tab3"
                      aria-selected="false"
                      class="ant-tabs-tab-btn"
                      id="rc-tabs-test-tab-tab3"
                      role="tab"
                      tabindex="-1"
                    >
                      Product Three
                    </div>
                  </div>
                  <div
                    class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
                    style="width: 0px; left: 0px; transform: translateX(-50%);"
                  />
                </div>
              </div>
              <div
                class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
              >
                <button
                  aria-controls="rc-tabs-test-more-popup"
                  aria-expanded="false"
                  aria-haspopup="listbox"
                  class="ant-tabs-nav-more"
                  id="rc-tabs-test-more"
                  style="visibility: hidden; order: 1;"
                  type="button"
                >
                  <span
                    aria-label="ellipsis"
                    class="anticon anticon-ellipsis"
                    role="img"
                  >
                    <svg
                      aria-hidden="true"
                      data-icon="ellipsis"
                      fill="currentColor"
                      focusable="false"
                      height="1em"
                      viewBox="64 64 896 896"
                      width="1em"
                    >
                      <path
                        d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="ant-tabs-content-holder"
            >
              <div
                class="ant-tabs-content ant-tabs-content-top"
              >
                <div
                  aria-hidden="false"
                  aria-labelledby="rc-tabs-test-tab-tab2"
                  class="ant-tabs-tabpane ant-tabs-tabpane-active"
                  id="rc-tabs-test-panel-tab2"
                  role="tabpanel"
                  tabindex="0"
                >
                  Content Two
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        ProCard Tabs 动态位置 Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            tabs.tabPosition
          </strong>
          : 标签页位置，可选值：'top' | 'bottom' | 'left' | 'right'
        </li>
        <li>
          <strong>
            tabs.activeKey
          </strong>
          : 当前激活的标签页 key
        </li>
        <li>
          <strong>
            tabs.items
          </strong>
          : 标签页配置数组
        </li>
        <li>
          <strong>
            tabs.onChange
          </strong>
          : 标签页切换时的回调函数
        </li>
      </ul>
      <h4>
        Tab Position 位置说明：
      </h4>
      <ul>
        <li>
          <strong>
            top
          </strong>
          : 标签页显示在内容上方（默认）
        </li>
        <li>
          <strong>
            bottom
          </strong>
          : 标签页显示在内容下方
        </li>
        <li>
          <strong>
            left
          </strong>
          : 标签页显示在内容左侧
        </li>
        <li>
          <strong>
            right
          </strong>
          : 标签页显示在内容右侧
        </li>
      </ul>
      <h4>
        Select 组件配置：
      </h4>
      <ul>
        <li>
          <strong>
            value
          </strong>
          : 当前选中的值
        </li>
        <li>
          <strong>
            onChange
          </strong>
          : 值改变时的回调函数
        </li>
        <li>
          <strong>
            popupMatchSelectWidth
          </strong>
          : 下拉菜单宽度是否与选择框宽度一致
        </li>
      </ul>
      <h4>
        状态管理：
      </h4>
      <ul>
        <li>
          <strong>
            tab
          </strong>
          : 使用 useState 管理当前激活的标签页
        </li>
        <li>
          <strong>
            tabPosition
          </strong>
          : 使用 useState 管理标签页位置
        </li>
        <li>
          <strong>
            动态切换
          </strong>
          : 通过 Select 组件动态切换标签页位置
        </li>
      </ul>
      <h4>
        交互特点：
      </h4>
      <ul>
        <li>
          <strong>
            位置切换
          </strong>
          : 可以实时切换标签页的显示位置
        </li>
        <li>
          <strong>
            状态保持
          </strong>
          : 切换位置时保持当前激活的标签页
        </li>
        <li>
          <strong>
            响应式适配
          </strong>
          : 不同位置适合不同的屏幕尺寸
        </li>
      </ul>
      <h4>
        使用场景：
      </h4>
      <ul>
        <li>
          <strong>
            布局测试
          </strong>
          : 测试不同标签页位置的显示效果
        </li>
        <li>
          <strong>
            响应式设计
          </strong>
          : 根据屏幕尺寸选择合适的标签页位置
        </li>
        <li>
          <strong>
            用户偏好
          </strong>
          : 允许用户自定义标签页位置
        </li>
        <li>
          <strong>
            内容展示
          </strong>
          : 根据内容特点选择合适的标签页位置
        </li>
      </ul>
      <h4>
        最佳实践：
      </h4>
      <ul>
        <li>
          <strong>
            位置选择
          </strong>
          : 根据内容长度和屏幕空间选择合适的位置
        </li>
        <li>
          <strong>
            用户体验
          </strong>
          : 考虑用户的阅读习惯和操作便利性
        </li>
        <li>
          <strong>
            响应式考虑
          </strong>
          : 在不同设备上测试标签页位置的显示效果
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>